<!--
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2025-03-19 09:53:56
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2025-04-10 19:50:16
 * @FilePath: \BusStopBoard.Webd:\360MoveData\Users\75041\Desktop\uniapp框架\my-project\src\pages\index\modules\Navigatio.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="statusbar">
    <view class="statusbar-content" @click="Press">
      <view class="time">{{ newDate }}</view>
      <view class="EquipRight">
        <view class="Equipment">设备编号:{{ androidId }} 版本:{{ oldversion }}</view>
        <view :class="isWebscok ? 'yellow' : 'red'">
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { mapGetters } from 'vuex';

dayjs.locale('zh-cn');

// 常量集中管理（方便维护调整）
const CONFIG = {
  exitClicks: 6,          // 退出所需点击次数
  resetTimeout: 1000,      // 重置计数器的等待时间
  clickInterval: 1500,     // 有效点击间隔
  toastDuration: 500      // 提示显示时间
};


export default {
  data() {
    return {
      newDate: '',
      intervalId: null,
      oldversion: "",
      clickCount: 0,      // 点击计数器
      lastClickTime: 0,   // 上次点击时间戳
      resetTimer: null
    };
  },
  computed: {
    ...mapGetters(['androidId', 'isWebscok'])
  },
  methods: {
    updateTime() {
      this.newDate = dayjs().format('MM月DD日 HH:mm dddd');
    },
    Press() {
      const now = Date.now();

      const { exitClicks, clickInterval, resetTimeout, toastDuration } = CONFIG;

      // 时间间隔有效性检查
      if (now - this.lastClickTime > clickInterval) {
        this.clickCount = 0;
      }

      // 清除可能存在的残余定时器
      if (this.resetTimer) {
        clearTimeout(this.resetTimer);
        this.resetTimer = null;
      }

      this.clickCount++;
      this.lastClickTime = now;

      // 提前判断是否达到退出条件
      if (this.clickCount >= exitClicks) {
        this.cleanupBeforeExit();
        this.triggerExit();
        return;
      }

      // 显示智能提示
      // this.showReminderToast(exitClicks - this.clickCount, toastDuration);
      console.log(`再点击 ${exitClicks - this.clickCount} 次退出`)

      // 设置带清理的回调
      this.resetTimer = setTimeout(() => {
        this.clickCount = 0;
        this.resetTimer = null; // 明确释放引用
      }, resetTimeout);
    },
    showReminderToast(remaining, duration) {
      // 添加平台检测（示例为uni-app）
      if (uni.getSystemInfoSync().platform === 'android') {
        uni.showToast({
          title: `再点击 ${remaining} 次退出`,
          icon: 'none',
          duration
        });
      }
    },
    cleanupBeforeExit() {
      // 清理所有副作用
      if (this.resetTimer) {
        clearTimeout(this.resetTimer);
        this.resetTimer = null;
      }
      uni.hideToast(); // 清除可能存在的提示
    },
    triggerExit() {
      // 添加安全退出逻辑
      try {
        if (typeof plus !== 'undefined' && plus.runtime) {
          plus.runtime.quit();
        } else {
          console.warn('原生退出API不可用');
          // 降级处理：跳转首页
          uni.reLaunch({ url: '/' });
        }
      } catch (e) {
        console.error('退出失败:', e);
        uni.showToast({
          title: '退出失败，请手动关闭',
          icon: 'none'
        });
      }
    }
  },
  mounted() {
    this.updateTime();
    // #ifdef APP-PLUS
    plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
      this.oldversion = widgetInfo.version //检测app版本
    });
    // #endif
    this.intervalId = setInterval(() => {
      this.updateTime();
    }, 1000 * 60);
  },
  beforeDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
};
</script>

<style lang="scss" scoped>
.statusbar {
  width: 100%;
  height: 42rpx;
  margin-bottom: 10rpx;
  background: #68a1fb;
}

.statusbar-content {
  width: 99%;
  height: 100%;
  line-height: 42rpx;
  padding: 0rpx 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  color: #ffffff;
  font-size: 24rpx;
}

.Equipment {
  margin-right: 12rpx;
  font-size: 12rpx;
  line-height: 12rpx;
}

.EquipRight{
  display: flex;
  align-items: center;
}

.yellow {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: #8bc34a;
}

.red {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background: red;
}
</style>